<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Layer弹窗插件</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>
<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            Layer弹窗插件
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>
                                        警示信息<code>$.modal.alert()</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-default"
                                            onclick="$.modal.alert('Hello World!')">问号警示</button>
                                        <button type="button" class="btn btn-primary"
                                            onclick="$.modal.alertSuccess('Hello World!')">对号警示</button>
                                        <button type="button" class="btn btn-success"
                                            onclick="$.modal.alertWarning('Hello World!')">叹号警示</button>
                                        <button type="button" class="btn btn-warning"
                                            onclick="$.modal.alertError('Hello World!')">叉号警示</button>
                                    </p>
                                    <p>
                                        提示信息<code>$.modal.msg()</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-primary"
                                            onclick="$.modal.msg('Hello World!')">文字提示</button>
                                        <button type="button" class="btn btn-info"
                                            onclick="$.modal.msgSuccess('Hello World!')">对号提示</button>
                                        <button type="button" class="btn btn-warning"
                                            onclick="$.modal.msgWarning('Hello World!')">叹号提示</button>
                                        <button type="button" class="btn btn-danger"
                                            onclick="$.modal.msgError('Hello World!')">叉号提示</button>
                                    </p>
                                    <p>
                                        确认信息框<code>$.modal.confirm()</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-info" id="btn_confirm">确认信息框</button>
                                    </p>
                                    <p>
                                        其他操作
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-primary" id="button-open-10">tab层</button>
                                        <button type="button" class="btn btn-primary"
                                            id="button-open-11">prompt层</button>
                                        <button type="button" class="btn btn-primary" id="button-open-12">相册层</button>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-primary btn-outline"
                                            id="button-open-16">右侧满屏</button>
                                        <button type="button" class="btn btn-success btn-outline"
                                            id="button-open-17">左侧满屏</button>
                                        <button type="button" class="btn btn-info btn-outline"
                                            id="button-open-18">底部满屏</button>
                                        <button type="button" class="btn btn-warning btn-outline"
                                            id="button-open-19">顶部满屏</button>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>窗口弹出
                                        <code>$.modal.open()</code>
                                        <code>$.modal.openFull()</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-primary" id="button_open_1">默认设置</button>
                                        <button type="button" class="btn btn-success" id="button_open_2">设置宽高</button>
                                        <button type="button" class="btn btn-info" id="button_open_3">回调事件</button>
                                        <button type="button" class="btn btn-warning" id="button_open_4">自定义按钮</button>
                                        <button type="button" class="btn btn-danger" id="button_open_5">全屏弹出</button>
                                    </p>
                                    <p>选项卡弹出方式
                                        <code>$.modal.openTab()</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-primary" id="button-open-6">新窗口打开</button>
                                        <button type="button" class="btn btn-warning" id="button-open-7">关闭当前</button>
                                        <button type="button" class="btn btn-primary"
                                            id="button-open-8">选卡页同一页签打开</button>
                                        <button type="button" class="btn btn-warning" id="button-open-9">关闭指定</button>
                                    </p>
                                    <p>提示并刷新
                                        <code>$.modal.msgReload()</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-primary"
                                            onclick="$.modal.msgReload('保存成功，刷新页面','success')">提示并刷新</button>
                                    </p>
                                    <p>遮罩提示
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-primary" id="button-open-13">打开</button>
                                        <button type="button" class="btn btn-warning" id="button-open-14">关闭</button>
                                        <button type="button" class="btn btn-primary"
                                            id="button-open-15">layer遮罩</button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>

    <script>
        $("#btn_confirm").click(function () {
            $.modal.confirm("确认要点击确定吗?", function () {
                $.modal.alertSuccess("真的点击了确定");
            });
        });
        $("#button_open_1").click(function () {
            $.modal.open('演示窗口', "./../../../pages/element/form/form-basic.html");
        });
        $("#button_open_2").click(function () {
            $.modal.open('演示窗口', "./../../../pages/element/form/form-basic.html", '900', '320');
        });
        $("#button_open_3").click(function () {
            $.modal.open('演示窗口', "./../../../pages/element/form/form-basic.html", '900', '320', callback);
        });
        $("#button_open_4").click(function () {
            var btn = ['<i class="fa fa-check"></i> 点我回调', '<i class="fa fa-close"></i> 点我关闭'];
            var options = {
                title: '演示窗口',
                width: "900",
                height: "320",
                url: "./../../../pages/element/form/form-basic.html",
                btn: btn,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        });

        $("#button_open_5").click(function () {
            $.modal.openFull('演示窗口', "./../../../pages/element/form/form-basic.html");
        });

        $("#button-open-6").click(function () {
            $.modal.openTab('演示窗口', "./../../../pages/element/form/form-basic.html");
        })

        $("#button-open-7").click(function () {
            $.modal.closeTab();
        })

        $("#button-open-8").click(function () {
            $.modal.parentTab('演示窗口', "./../../../pages/element/form/form-basic.html");
        })

        $("#button-open-9").click(function () {
            // 需要关闭窗口的url
            $.modal.closeTab("./../../../pages/element/form/form-basic.html");
        });
        $("#button-open-10").click(function () {
            //tab层
            layer.tab({
                area: ['600px', '300px'],
                tab: [{
                    title: 'TAB1',
                    content: '这个是tab内容1'
                },
                {
                    title: 'TAB2',
                    content: '这个是tab内容2'
                },
                {
                    title: 'TAB3',
                    content: '这个是tab内容3'
                }]
            });
        })

        $("#button-open-11").click(function () {
            layer.prompt({ title: '输入任何口令，并确认', formType: 1 }, function (pass, index) {
                layer.close(index);
                layer.prompt({ title: '随便写点啥，并确认', formType: 2 }, function (text, index) {
                    layer.close(index);
                    layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
                });
            });
        })
        $("#button-open-12").click(function () {
            var json = {
                "title": "相册测试", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式
                    {
                        "alt": "测试照片一",
                        "pid": 1, //图片id
                        "src": "./../../../static/img/logo.png", //原图地址
                        "thumb": "./../../../static/img/logo.png" //缩略图地址
                    },
                    {
                        "alt": "测试照片二",
                        "pid": 2, //图片id
                        "src": "./../../../static/img/logo.png", //原图地址
                        "thumb": "./../../../static/img/logo.png" //缩略图地址
                    }
                ]
            };
            layer.photos({
                photos: json,
                closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        })

        $("#button-open-13").click(function () {
            $.modal.loading("数据加载中");
        })

        $("#button-open-14").click(function () {
            $.modal.closeLoading();
        })

        $("#button-open-15").click(function () {
            layer.load(0, { shade: false }); // 0代表加载的风格，支持0-2
        })

        var windowHeight = $(window).height();
        var windowWidth = $(window).width();
        $("#button-open-16").click(function () {
            layer.open({
                type: 2
                , anim: -1
                , skin: 'layer-reset layui-slide-right'
                , content: './../../../pages/element/form/form-basic.html'
                , title: '窗口标题'
                , area: ['280px', windowHeight + 'px']
                , offset: 'rb'
                , btn: ['按钮1', '按钮2']
                , move: false
                , shadeClose: true
                , fixed: true
                , resize: false
                , scrollbar: false
            });
        })
        $("#button-open-17").click(function () {
            layer.open({
                type: 2
                , anim: -1
                , skin: 'layer-reset layui-slide-left'
                , content: './../../../pages/element/form/form-basic.html'
                , title: '窗口标题'
                , area: ['280px', windowHeight + 'px']
                , offset: 'lb'
                , btn: ['按钮1', '按钮2']
                , move: false
                , shadeClose: true
                , fixed: true
                , resize: false
                , scrollbar: false
            });
        })
        $("#button-open-18").click(function () {
            layer.open({
                type: 1
                , anim: 2
                , content: '窗体内容'
                , title: '窗体标题'
                , area: [windowWidth +'px', '300px']
                , offset: 'b'
                , move: false
                , shadeClose: true
                , fixed: true
                , resize: false
                , scrollbar: false
            });
        })
        $("#button-open-19").click(function () {
            layer.open({
                type: 1
                , anim: 0
                , content: '窗体内容'
                , title: '窗体标题'
                , area: [windowWidth +'px', '300px']
                , offset: 't'
                , move: false
                , shadeClose: true
                , fixed: true
                , resize: false
                , scrollbar: false
            });
        })
        function doSubmit(index, layero) {
            $.modal.alertSuccess('调用回调提交事件');
        }

        function callback(index, layero) {
            $.modal.alertSuccess('调用了回调事件');
        }
    </script>
</body>

</html>